{layout name="ucenter/layout" /}
<div class="layui-form-item">
  <label class="layui-form-label">头像</label>
  <div class="layui-input-block">
    <img id="upload-face" style="width:100px;height:100px;cursor:pointer" src="{$userInfo.face|default='/static/images/default_face.jpg'}" />
  </div>
</div>
<form class="layui-form" action="" method="post">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="nickname" value="{$userInfo.username}" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">（长度为4-12）</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机号</label>
    <div class="layui-input-inline">
      <input type="text" name="mobile" value="{$userInfo.mobile}" placeholder="请输入手机号" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-inline">
      <input type="email" name="email" value="{$userInfo.email}" placeholder="请输入邮箱" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">个人说明</label>
    <div class="layui-input-block">
      <textarea name="intro" placeholder="别太懒，留下点什么吧！" class="layui-textarea">{$userInfo.intro}</textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button id="btn-submit" class="layui-btn" lay-submit lay-filter="userInfo">修改</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
  layui.use('layer');
  //头像上传
  layui.use('upload', function(){
    var upload = layui.upload;
    upload.render({
      elem: '#upload-face'
      ,url: '/home/ucenter/uploads?path=userFace'
      ,auto: false
      ,accept:'images'
      ,field:'Image'
      ,bindAction: '#btn-submit'
      ,choose: function(obj){
        obj.preview(function(index, file, result){
          $("#upload-face").attr("src",result);
        });
      }
      ,done:function(res){
        if(res.code == 0){      
          layer.msg(res.msg,{icon:2});
        }
      }
    });      
  });

  //修改信息
  layui.use('form', function(){
    var form = layui.form;
    form.on('submit(userInfo)', function(data){
      $.ajax({
        type:"post",
        data:data.field,
        url:"{:url('index')}",
        success:function(e){
          if(e.code == 1){
            layer.msg(e.msg,{icon:1});
          }else{
            layer.msg(e.msg,{icon:2});
          }
        }
      })
      return false;
    });
  });
</script>